<template>
  <div class="fabu">
    <ul>
      <li>
        活动标题：
        <input type="text" v-model="info.title" placeholder="请输入活动标题" />
      </li>
      <li>
        活动内容：
        <input type="text" v-model="info.content" placeholder="活动详情" />
      </li>
      <li>
        活动图片：
        <input type="file" ref="acti" name="file" v-on:change="upImg" />
      </li>
      <li>
        报名开始时间
        <input type="text" v-model="info.applyTime" placeholder="请确定活动报名时间" />
      </li>
      <li>
        报名结束时间
        <input type="text" v-model="info.endTime" placeholder="请确定活动报名结束时间" />
      </li>
      <li>
        签到结束时间
        <input type="text" v-model="info.signInEnd" placeholder="请确定活动签到结束时间" />
      </li>
      <li>
        活动签到密码
        <input type="text" v-model="info.password" placeholder="请设置活动签到密码" />
      </li>
      <li>
        活动分数
        <input type="text" v-model="info.grade" />
      </li>
      <li>
        活动类别
        <input type="text" v-model="info.category" placeholder="活动类型" />
      </li>
      <input class="tijiao" type="submit" value="提交活动" @click="emtie" />
    </ul>
  </div>
</template>

<script>
import { upFile } from "ulit/upFile";
import { upData } from "request/upData";
import {addAct} from "request/activity"
export default {
  data() {
    return {
      info: {
        title: "",
        content: "",
        imgUrl: "",
        applyTime: "",
        endTime: "",
        signInEnd: "",
        password: "",
        grade: "",
        category: "",
      },
    };
  },
  methods: {
    emtie() {
      for (var val in this.info) {
        if (!this.info[val]) {
          alert("请填写完整");
          return;
        }
      }
      addAct(this.info).then(res=>{
        console.log(res.data)
      })
    },
    upImg() {
      var data = upFile(this.$refs.acti);
      upData(data).then((res) => {
        this.info.imgUrl=res.data.path
      });
    },
  },
};
</script>

<style lang="less" scoped>
.fabu {
  font-size: 1.2rem;
  ul {
    li {
      margin: 0.5rem 0;
      text-align: center;
      input {
        width: 60%;
      }
    }
    .tijiao {
      display: block;
      margin: 0.5rem auto;
    }
  }
}
</style>